<template>
    <div class="page flex-col">
        <div class="tab-container">
            <div class="tab-nav flex">
                <p class="title" :class="{'active':active == 1}" @click="active = 1">钱包</p>
                <p class="title" :class="{'active':active == 2}" @click="active = 2">Visa</p>
            </div>
            <div class="currency-balance">
                <div class="group_2 flex-col" v-if="active == 2" style="margin-bottom: 20px;">
                    <div class="text-group_2 flex-col">
                        <img src="@/assets/VisaPayment.png" class="currency-icon" alt="">
                        <span class="text_3"></span>
                    </div>
                    <span class="text_5">&nbsp;</span>
                    <div class="image_2">
                        4539 7611 9571 5510
                    </div>
                </div>
                <div class="currency-item flex" v-for="(item,index) in list.filter(item=>item.type == active)" :key="index">
                    <div class="img" v-if="item.type == 2">
                        <img :src="getImage(item.img)" alt="">
                    </div>
                    <img v-else :src="getImage(item.img)" alt="">
                    <div class="currency">
                        <p >
                            {{item.currency}}
                        </p>
                        <p style="font-size: 16px;color: #666;" v-if="active == 1">
                            {{item.gross}} <span style="margin-left: 3px; color: green;">{{ item.rise }} </span>
                        </p>
                    </div>
                    <div class="balance">
                        <p style="font-weight: bold;">
                            {{ item.balance  }}
                        </p>
                        <p style="color: #666;font-size: 16px;" v-if="active == 1">
                            {{ item.mygross  }}
                        </p>
                    </div>
                </div>
               
            </div>
            
        </div>
        
        <div class="group_5 flex-row bottom-nav">
            <div class="image-text_3 flex-col">
                <img class="image_4" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPng55cc9c0cbfb4462b897a76df856253466e1633bd8deae05c65b40ffc6688e737" />
                <span class="text-group_6" style="color: #D19310;">账户</span>
            </div>

            <div class="image-text_5 flex-col" @click="()=>{routerKey.push({path:'/homeDetails'})}">
                <img class="image_5" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPng8699fca86f2980dab24429de2bb6788c7f5c9d342ca4fa4f1fb747eb19643cea" />
                <span class="text-group_8">交易</span>
            </div>
            <div class="image-text_7 flex-col">
                <img class="thumbnail_7" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPngf93c6fd8b0580699d12423a39337d5444867cb15449db61d176fdb1bfc8828d3" />
                <span class="text-group_10">设置</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                { img: "../assets/btc.webp", type:1, currency:"BTC", balance: "0.001988", gross:'$81,618.7', mygross:'$162.32', rise:'+6.14%'},
                { img: "../assets/BNB.png", type:1, currency:"BNB", balance: "0.1714"  , gross:'$638.8', mygross:'$109.51', rise:'+1.89%'},
                { img: "../assets/eth.webp", type:1, currency:"ETH", balance: "0.01843"  , gross:'$3,220.46', mygross:'$109.51', rise:'+3.3%'},
                { img: "../assets/usdt.png", type:1, currency:"USDT", balance: "55.9837"  , gross:'$1 ', mygross:'$56.01', rise:'+0.01%'},
                { img: "../assets/trx.png", type:1, currency:"TRX", balance: "20.1564"  , gross:'$0.1654 ', mygross:'$3.33', rise:'+2.32%'},
                { img: "../assets/USDC.webp", type:1, currency:"USDC", balance: "1.8792"  , gross:'$0.9998 ', mygross:'$1.87', rise:'+0.01%'},
                { img: "../assets/lusd.png", type:1, currency:"LUSD", balance: "1.6534"  , gross:'$0.998', mygross:'$1.65', rise:'+0.09%'},
                { img: "../assets/okb.webp", type:1, currency:"OKB", balance: "0"  , gross:'$45.06', mygross:'$0.00', rise:'+6.27%'},

                { img: "../assets/usd.static.svg", type:2, currency:"美元", balance: "10000.00", gross:'$0.00000000 ', mygross:'$0.00000000', rise:'+0.00%'},
                { img: "../assets/eur.static.svg", type:2, currency:"欧元", balance: "10000.00", gross:'$0.00000000 ', mygross:'$0.00000000', rise:'+0.00%'},
                { img: "../assets/hkd.static.svg", type:2, currency:"港币", balance: "10000.00", gross:'$0.00000000 ', mygross:'$0.00000000', rise:'+0.00%'},
                // 美元  港币
            ],
            active:2
        };
    },
    methods: {
        getImage(imageName) {
            return new URL(imageName, import.meta.url).href;
        }
    },
    created() {
        document.title = "账户"
    }
};
</script>
<style src="./walletcss/common.css" />
<style src="./walletcss/index.css" />

<style lang="less" scoped>
.page{
    background-color: #fff;
}
.group_2 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.bottom-nav {
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    left: 0;
    top: unset;
    padding-left: 0;
    padding-right: 0;
    // height: 60px;
    // background: #fff;
    // border-top: 1px solid #eee;
    .flex-col {
        margin-left: 0;
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
    }
}
.tab-container{
    background: #fff;
    padding: 20px;
    // margin-top: 30px;
    min-height: 100% ;
    .tab-nav{
        .title{
            font-size: 18px;
            color: #666;
            flex: 1;
            line-height: 25px;
            text-align: center;
        }
        .active{
            font-size: 19px;
            color: #111;
            font-weight: 600;
            position: relative;
            &::after{
                content: ' ';
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translate(-50%,0);
                width: 40px;
                border-bottom:  3px solid #111;

            }
        }
    }
    .currency-balance{
        padding:  30px 0;
        .currency-item{
            align-items: center;
            padding: 12px 0;
            .img{
                width: 35px;
                height: 35px;
                border-radius: 50%;
                margin-right: 10px;
                overflow: hidden;
                position: relative;
                img{
                    position: absolute;
                    width: 150%;
                    height: 150%;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);

                    // position: relative;
                    // --tw-scale-x: 1.4 !important;
                    // --tw-scale-y: 1.4 !important;
                    // // --tw-translate-x:0;
                    // // --tw-translate-y:0;
                    // // --tw-rotate:0;
                    // // --tw-skew-x:0;
                    // // --tw-skew-y:0;
                    // transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translate(-5%,-5%) !important ;
                    // -webkit-transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translate(-5%,-5%)  !important;
                    // -moz-transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
                    // -o-transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;;
                }
            }
            img{
                width: 35px;
                height: 35px;
                border-radius: 50%;
                margin-right: 10px;
            }
            .currency{
                font-size: 19px;
                flex: 1;
                color: #000;
            }
            .balance{
                font-size: 17px;
                // font-weight: bold;
                text-align: right;
                color: #333;
            }
        }
    }
}


.group_2.flex-col {
    padding-bottom: 0;
    overflow: hidden;
    margin-bottom: 30px;
    margin: 0;
    background: #333;
    box-shadow:  0px 0 5px 0px #333;
    
    .text-group_2{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin:0 15px;
    }
    .currency-icon {
        width: 80px;
        height: auto;
        // border-radius: 50%;
    }
    .text_5{
        margin: 0;
        margin-top: 5px;
        padding: 0 15px;
        width: 78px;
        font-size: 15px;
        color: #fff;
        text-align: center;
        display: inline-block;
    }
    .text_3{
        color: #fff;
    }
    .image_2 {
        border-top: 2px solid #f2f2f2;
        width: 100%;
        font-family: 'rili-Font';
        margin: 0;
        padding: 0;
        margin-top: 35px;
        padding: 0 15px;
        font-size: 25px ;
        letter-spacing: 2px;
        background: #fff0d3;
        height: 50px;
        line-height: 50px;
    }
}
</style>